<script setup lang="ts">
import haveHeadCard from "@/components/haveHead-card.vue";
import {ref, reactive} from 'vue'
import {ElMessage} from "element-plus";

//表单数据
const tableData = ref([
  {
    id: '1',
    name: '热销榜',
    state: true,
    emit: false,

  },
  {
    id: '2',
    name: '单人精彩套餐',
    state: true,
    emit: false,
  },
  {
    id: '3',
    name: '冰爽饮品限时特惠',
    state: true,
    emit: false,
  },
  {
    id: '4',
    name: '精选热菜',
    state: true,
    emit: false,
  },
  {
    id: '5',
    name: '爽口凉菜',
    state: true,
    emit: false,
  },
])


//分页数据
const currentPage4 = ref(4)
const pageSize4 = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

//编辑部分

//编辑控制
const emitRef = ref('编辑')

//点击编辑
function emit(row: any) {
  if (row.emit) {
    row.emit = false
  } else {
    row.emit = true
  }
}


//mask弹窗
//控制弹窗
const dialogFormVisible = ref(false)

//添加数据
const formType = reactive({
  name: '',
  state: true,
})

//添加分类
function addType() {
  ElMessage.success('添加成功')
  dialogFormVisible.value = false
  tableData.value.push({
    id: `${tableData.value.length + 1}`,
    name: formType.name,
    state: formType.state,
    emit: false,
  })
  formType.name = ''
}


</script>

<template>
  <div class="good-type">
    <haveHeadCard>
      <template #title>
        <div class="good-type-head">
          <div class="good-type-title">
            <h2>商品类型</h2>
          </div>
          <div class="good-type-bth">
            <el-button type="primary" size="large" @click="dialogFormVisible = true">添加分类</el-button>
          </div>
        </div>
      </template>

      <template #content>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column fixed prop="id" label="序号" width="150"/>
          <el-table-column prop="name" label="分类名称" width="300">
            <template #default="scope">
              <el-input v-if="scope.row.emit" v-model="scope.row.name"></el-input>
              <span v-else>{{ scope.row.name }}</span>

            </template>
          </el-table-column>
          <el-table-column prop="state" label="State" width="300">
            <template #default="scope">
              <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dcdfe6"
                         v-model="scope.row.state"/>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="500">
            <template #default="scope">
              <el-button size="large" @click="emit(scope.row)" v-if="scope.row.emit" type="success">
                {{ scope.row.emit ? '完成' : '编辑' }}
              </el-button>
              <el-button size="large" @click="emit(scope.row)" v-else>{{ scope.row.emit ? '完成' : '编辑' }}</el-button>
              <el-button type="danger" size="large">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <div class="footer">
          <el-pagination
              v-model:current-page="currentPage4"
              v-model:page-size="pageSize4"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total,prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </template>
    </haveHeadCard>
    <!-- 弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="添加分类" width="560">
      <el-form :model="formType">
        <el-form-item label="分类名称">
          <el-input v-model="formType.name" autocomplete="off" size="large" placeholder="请输入分类名称"/>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dcdfe6" v-model="formType.state"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
          <el-button @click="addType" type="primary">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.good-type-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>